<template>
  <div class="echart">
    <div id="main" style="width: 1000px; height: 400px"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      var myChart = echarts.init(document.querySelector("#main"));
      // 绘制图表
      var option = {
        title: {
          text: "ECharts 入门示例",
        },
        grid:{
          left:300,
        },
        // backgroundColor: "#2c343c",
        // textStyle: {
        //   color: "rgba(255, 255, 255, 0.3)",
        // },
        tooltip: {},
        legend: {
          data: ["销量", "人气", "圆盘"],
        },
        xAxis: [
          {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
        ],
        yAxis: {},
        series: [
          {
            name: "圆盘",
            type: "pie",
            center: ["50%", "30%"],
            radius: 60,
            label: {
              // backgroundColor:"blue",
              textStyle: {
                color: "red",
              },
            },
            color: [
              "#dd6b66",
              "#759aa0",
              "#e69d87",
              "#8dc1a9",
              "#ea7e53",
              "#eedd78",
              "#73a373",
              "#73b9bc",
              "#7289ab",
              "#91ca8c",
              "#f49f42",
            ],
            data: [
              { value: 400, name: "不知火舞" },
              { value: 500, name: "八神" },
              { value: 300, name: "刘德华" },
            ],
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: "blue",
              },
              label: {
                // show: true,
                // 高亮时标签的文字。
                // formatter: "This is a emphasis label.",
              },
            },
            roseType: "angle",
            itemStyle: {
              // 阴影的大小
              shadowBlur: 200,
              // 阴影水平方向上的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          {
            name: "销量",
            type: "bar",
            data: ["2", 20, 36, 10, 10, 20],
            //  color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
          },
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
          {
            name: "人气",
            type: "bar",
            data: [15, 120, 136, 110, 101, 201],
            //  color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
            // color:"blue"
          },
          {
            name: "人气",
            type: "line",
            lineStyle: {
              width: 2,
              type: "dashed",
            },
            data: [15, 210, 316, 110, 110, 210],
          },
        ],
      };
      myChart.setOption(option);
    });
  },
};
</script>

<style>
</style>